<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background:rgba(90,194,255,1);
        }

        .vueApp {
            overflow: hidden;
        }

        .m-list-mod {
            margin: 15px;
            padding: 0 11px;
            background:rgba(255,255,255,1);
            box-shadow:0px 4px 10px 0px rgba(0,135,214,0.37);
            border-radius:10px;
            margin-bottom: 15px;
        }

        .m-list-mod:last-of-type {
            margin-bottom: 0;
        }

        .o-list-avatar-row {
            padding-top: 10px;
            height: 60px;
            box-sizing: content-box;
        }

        .c-list-item-title {
            min-width: fit-content;
            font-size:15px;
            font-weight:bold;
            color:rgba(25,25,25,1);
        }

        .c-list-item-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
        }

        .o-list-item {
            height: 50px;
        }

        .c-list-item-input {
            height: 50px;
            text-align: right;
        }

        .c-list-item-input::placeholder {
            line-height: normal;
            font-size:15px;
            font-weight:400;
            color:rgba(191,191,191,1);
        }

        .o-list-item-select {
            height: 50px;
        }

        .c-list-item-selectname {
            font-size:15px;
            font-weight:400;
            color:rgba(191,191,191,1);
        }

        .c-list-item-arrow {
            width: 17px;
            height: 16px;
            margin-left: 8px;
        }

        .m-tips-mod {
            height: 42px;
            margin: 50px auto 0 auto;
            text-align: center;
        }

        .o-tips-flexbox {
            height: 21px;
        }

        .c-tips-icon {
            width: 9px;
            height: 10px;
            margin-bottom: 1px;
            margin-right: 3px;
        }

        .c-tips-content {
            font-size:13px;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:21px;
        }

        .c-border-bottom-less {
            position: relative;
        }

        .c-border-bottom-less::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: rgb(212,212,212);
            transform: scaleY(0.5);
        }

        .c-border-bottom-less:last-child::after {
            display: none;
        }
    </style>
</head>
<body>
    <div class="vueApp" v-cloak>
        <div class="m-list-mod">
            <div class="o-list-avatar-row c-border-bottom-less" data-flex="main:justify cross:center" tapmode @click="fnOpenPhoto('personalInfo', '1')">
                <div class="c-list-item-title">
                    头像
                </div>
                <img class="c-list-item-avatar" v-bind:src="info.icon" alt="">
            </div>
            <div class="o-list-item  c-border-bottom-less" data-flex="main:justify cross:center">
                <div class="c-list-item-title">
                    用户名
                </div>
                <input class="c-list-item-input" v-model="info.nickName" maxlength="15" data-flex-box="1" type="text" placeholder="请输入用户名">
            </div>
            <div v-if="memberType == 1" class="o-list-item  c-border-bottom-less" data-flex="main:justify cross:center">
                <div class="c-list-item-title">
                    家长姓名
                </div>
                <input class="c-list-item-input" v-model="info.relativesName" maxlength="15" data-flex-box="1" type="text" placeholder="请输入家长姓名">
            </div>
            <div class="o-list-item  c-border-bottom-less" onclick="handlePopSheet(1)" data-flex="main:justify cross:center">
                <div class="c-list-item-title">
                    性别
                </div>
                <div class="o-list-item-select" data-flex-box="1" data-flex="main:right cross:center">
                    <input class="c-list-item-input" readonly="" data-flex-box="1" type="text" :value="info.gender|genderTxt" placeholder="请选择性别">
                    <img class="c-list-item-arrow" src="../../image/ui/arrow_right_2.png" alt="">
                </div>
            </div>
        </div>
        <div class="m-list-mod">
            <div onclick="handlePopSheet(2)" class="o-list-item c-border-bottom-less" data-flex="main:justify cross:center">
                <div class="c-list-item-title">
                    学校所在地
                </div>
                <div class="o-list-item-select" data-flex-box="1" data-flex="main:right cross:center">
                    <input class="c-list-item-input" readonly="" data-flex-box="1" type="text" :value="info.schoolAddress" placeholder="请选择学校所在地">
                    <img class="c-list-item-arrow" src="../../image/ui/arrow_right_2.png" alt="">
                </div>
            </div>
            <div onclick="handleSelShool()" class="o-list-item c-border-bottom-less" data-flex="main:justify cross:center">
                <div class="c-list-item-title">
                    学校名称
                </div>
                <div class="o-list-item-select" data-flex-box="1" data-flex="main:right cross:center">
                    <input class="c-list-item-input" readonly="" data-flex-box="1" type="text" :value="info.schoolName" placeholder="请选择学校">
                    <img class="c-list-item-arrow" src="../../image/ui/arrow_right_2.png" alt="">
                </div>
            </div>
            <div onclick="handlePopSheet(3)" class="o-list-item c-border-bottom-less" data-flex="main:justify cross:center">
                <div class="c-list-item-title">
                    年级
                </div>
                <div class="o-list-item-select" data-flex-box="1" data-flex="main:right cross:center">
                    <input class="c-list-item-input" readonly="" data-flex-box="1" type="text" :value="info.grades|gradeTxt" placeholder="请选择年级">
                    <img class="c-list-item-arrow" src="../../image/ui/arrow_right_2.png" alt="">
                </div>
            </div>
            <div v-if="memberType == 1" class="o-list-item c-border-bottom-less" data-flex="main:justify cross:center">
                <div class="c-list-item-title">
                    班级
                </div>
                <input class="c-list-item-input" v-model="info.classes" maxlength="15" data-flex-box="1" type="text" placeholder="请输入班级">
            </div>
        </div>
        <div class="m-tips-mod">
            <div class="o-tips-flexbox" data-flex="main:center cross:center">
                <img class="c-tips-icon" src="../../image/ui/start_3.png" alt="">
                <div class="c-tips-content">{{ memberType == 1 ? '修改学校会使已加入班级群组自动退出' : '修改学校会使已创建班级自动解散' }}</div>
            </div>
            <div class="c-tips-content">请谨慎操作</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/service/service-pic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    var selModel = 0;
    var addressCode = {};
    var sexs = [{ name: '男', id: '1' }, { name: '女', id: '2' }],
        classes = [{ name: '一年级', id: '1' }, { name: '二年级', id: '2' }, { name: '三年级' , id: '3'}, { name: '四年级', id: '4' }, { name: '五年级', id: '5' }, { name: '六年级', id: '6' }];
    apiready = function(){
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        fnInit();
        fnInitAliYunOss();
        api.addEventListener({
            name: 'imgURL'
        }, function(ret, err) {
            fnOpenClipPic(ret.value.imgURL[0].path,'personalInfo');
        });
        api.addEventListener({
            name: 'setAvatar'
        }, function(ret, err) {
            var info = deepCopy(vm.info);
            info.icon = ret.value.avatar;
            vm.info = info;
        });
    };

    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                memberType: getUserType(),
                info: {}
            },
            filters: {
                gradeTxt: function(sender) {
                    var sel = classes[sender -1];
                    return sel ? sel.name : '';
                },
                genderTxt: function(sender) {
                    var sel = sexs[sender -1];
                    return sel ? sel.name : '';
                }
            }
        });
        api.addEventListener({
            name: 'select_school'
        }, function(ret) {
            var info = deepCopy(vm.info);
            info.schoolId = ret.value.schoolId;
            info.schoolName = ret.value.schoolName;
            vm.info = info;
        });
        getUserInfo();
    }

    // 保存
    function headerFn() {
        if(vm.info.nickName === '') {
            fnToast('用户名不能为空');
            return;
        };
        if(vm.memberType == 1 && vm.info.relativesName === '') {
            fnToast('家长姓名不能为空');
            return;
        };
        if(vm.info.gender === '') {
            fnToast('请选择性别');
            return;
        }
        var url = 'apiTbAppUser/updateUserBasic';
        var params = vm.info;
        var callback = function() {
            fnToast('更新成功');
            api.sendEvent({
                name: 'updateUserInfo'
            });
            setTimeout(function() {
                api.closeWin();
            }, 200);
        };
        POST(url, params, callback);
    }

    // 获取用户信息
    function getUserInfo() {
        $S.POST("apiTbAppUser/findUserBasic", {}, function (ret, err) {
            if (ret && ret.status == "200") {
                vm.info = ret.data;
                addressCode.provCode = vm.info.schoolProvCode;
                addressCode.cityCode = vm.info.schoolCityCode;
                addressCode.countryCode = vm.info.schoolCountryCode;
            }
        })
    }

    // 选择学校
    function handleSelShool() {
        if(vm.info.schoolAddress !== '') {
            if(vm.info.schoolId !== '') {
                var alertType;
                if(vm.memberType == 2) {
                    alertType = '16';
                } else {
                    alertType = '20';
                }
                fnOpenAlert({
                    alertType: alertType,
                    alertConfirmFn: 'handleSelShoolConfirm'
                })
            } else {
                handleSelShoolConfirm();
            }
        }else {
            fnToast('请先选择学校地址');
        }
    }

    // 修改学校确认
    function handleSelShoolConfirm() {
        fnOpenPublicWin('请选择学校', 'login/select_school',{
            isBtn: true,
            btnName: '确认',
            headerFn: 'handleComfirm',
            addressCode: addressCode
        });
    }

    function fnOpenClipPic(url) {
        var tParam = {
            name: 'clip_pic_win',
            url: 'widget://html/clip_pic_win.html',
            pageParam: {
                picUrl: url
            }
        }
        fnOpenWin(tParam);
    }


    // 性别 年级
    function pickerCallback(name, code) {
        var sel = { name: name, code: code };
        var info = deepCopy(vm.info);
        switch(selModel) {
            case '1':
                info.gender = sel.code;
                break;
            case '3':
                info.grades = sel.code;
                break;
        }
        vm.info = info;
    }

    function fnSetArea(provinceCode, cityCode, countyCode, areaName) {
        addressCode.provCode = provinceCode;
        addressCode.cityCode = cityCode;
        addressCode.countryCode = countyCode;

        var info = deepCopy(vm.info);
        info.schoolAddress = areaName;
        info.schoolName = '';
        vm.info = info;
    }

    // 选择 1 性别， 2 学校所在地， 3 年级
    function handlePopSheet(type) {
        selModel = type+'';
        if(type != 2) {
            fnOpenFrame({
                name: 'picker',
                url: '../mine/info_layer.html',
                rect: {
                    x:0,y:0,w:'auto',h:'auto'
                },
                pageParam: {
                    frameName: api.frameName,
                    winName: api.winName,
                    listData: type == 1 ? sexs : classes,
                    val: null
                }
            })
        }else {
            if(vm.info.schoolAddress !== '') {
                fnOpenAlert({
                    alertType: '19',
                    alertConfirmFn: 'handleSelShoolAddressConfirm'
                })
            } else {
                handleSelShoolAddressConfirm();
            }
        }
    }

    function handleSelShoolAddressConfirm() {
        fnOpenFrame({
            name: 'address_picker',
            url: '../mine/area_layer.html',
            rect: {
                x:0,y:0,w:'auto',h:'auto'
            },
            pageParam: {
                frameName: api.frameName,
                winName: api.winName,
                provinceCode: addressCode.provCode,
                cityCode: addressCode.cityCode,
                countyCode: addressCode.countyCode
            }
        })
    }
</script>
</html>
